{% extends 'customer_dashboard.html' %}

{% block content %}
<style>
  .balance-wrapper {
    display: flex;
    justify-content: center;
    padding: 40px 0;
  }

  .balance-card {
    background-color: #f5f9ff;
    padding: 30px 35px;
    border-radius: 16px;
    max-width: 750px;
    width: 100%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  }

  .balance-header {
    text-align: center;
    margin-bottom: 20px;
  }

  .balance-header h2 {
    font-size: 26px;
    margin: 0;
  }

  .balance-header i {
    font-size: 24px;
    color: #3399ff;
    vertical-align: middle;
    margin-right: 6px;
  }

  .balance-summary {
    margin: 20px 0;
    padding: 15px;
    background-color: #e9f5ff;
    border-left: 5px solid #007bff;
  }

  .card-item {
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    padding: 20px;
    margin-bottom: 25px;
    background-color: #ffffff;
  }

  .action-buttons {
    margin-top: 20px;
    display: flex;
    gap: 12px;
    justify-content: space-between;
  }

  .action-buttons .flex-btn {
    flex: 1 1 0;
    text-align: center;
    padding: 10px 0;
    min-width: 0;
    background-color: #3399ff;
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s;
  }

  .action-buttons .flex-btn:hover {
    background-color: #267cd6;
    color: #fff;
  }

  .note {
    margin-top: 30px;
    font-size: 13px;
    color: gray;
    text-align: center;
  }

  .no-card {
    color: gray;
    text-align: center;
    margin-top: 20px;
  }
</style>

<div class="balance-wrapper">
  <div class="balance-card">
    <div class="balance-header">
      <h2><i class="bi bi-wallet2"></i> 余额查询</h2>
      <p style="color: #555;">尊敬的客户 {{ session.get('customer_name') }}，您好！以下是您账户的余额信息：</p>
    </div>

    <div class="balance-summary">
      <h3>💰 总余额：<span style="color: #007bff;">{{ "%.2f"|format(balance) }} 元</span></h3>
    </div>

    {% if cards %}
      {% for card in cards %}
      <div class="card-item">
        <p><strong>银行卡号：</strong>{{ card.cardID }}</p>
        <p><strong>账户余额：</strong>{{ "%.2f"|format(card.balance) }} 元</p>
        <p><strong>币种：</strong>{{ card.curID or '人民币 RMB' }}</p>
        <p><strong>开卡日期：</strong>{{ card.openDate or '未知' }}</p>
        <p><strong>开卡金额：</strong>{{ "%.2f"|format(card.openMoney) }} 元</p>
        <p>
          <strong>是否挂失：</strong>
          {% if card.IsReportLoss == '是' %}
            <span style="color: red;">是</span>
          {% else %}
            <span style="color: green;">否</span>
          {% endif %}
        </p>
        <p><strong>最近交易时间：</strong>{{ card.lastTransactionTime or '暂无记录' }}</p>

        <div class="action-buttons">
          <a href="{{ url_for('customer.transactions') }}" class="flex-btn">查看交易记录</a>
          <a href="{{ url_for('customer.deposit') }}" class="flex-btn">去存款</a>
          <a href="{{ url_for('customer.withdraw') }}" class="flex-btn">去取款</a>
          <a href="{{ url_for('customer.transfer') }}" class="flex-btn">去转账</a>
          <a href="{{ url_for('customer.customer_home') }}" class="btn-blue-rounded flex-btn">返回首页</a>


        </div>
      </div>
      {% endfor %}
    {% else %}
      <div class="no-card">您暂时没有绑定任何银行卡。</div>
    {% endif %}

    <div class="note">
      <i class="bi bi-info-circle"></i> 温馨提示：请妥善保管银行卡信息，注意账户安全。
    </div>
  </div>
</div>
{% endblock %}
